<template>
  <!-- 工序检记录查询 -->
  <div style="width:100%;height:100%;background:#f3f3f3;">
    <van-nav-bar :title="title" fixed class="titleStyle" left-arrow @click-left="onClickLeft">
      <template #right>
        <van-icon name="search" class="search" @click="showPopup" />
      </template>
    </van-nav-bar>
    <!--  搜索条件 -->
    <van-popup v-model="show" position="top" :style="{ paddingTop: '30px'}" @close="closeClick">
      <van-cell-group>
        <ul class="searchBox">
          <li>
            <div class="searchLeft">工单号: </div>
            <div class="searchRight">
              <van-field v-model="search.workOrderNo" />
            </div>
          </li>
          <li>
            <div class="searchLeft">计划单号: </div>
            <div class="searchRight">
              <van-field v-model="search.planNo" />
            </div>
          </li>
          <li>
            <div class="searchLeft">计划批次号: </div>
            <div class="searchRight">
              <van-field v-model="search.planBatchNo" />
            </div>
          </li>
          <li>
            <div class="searchLeft">合并计划批次号: </div>
            <div class="searchRight">
              <van-field v-model="search.planMergeBatchNo" />
            </div>
          </li>
          <li>
            <div class="searchLeft">半成品/成品: </div>
            <div class="searchRight">
              <van-field v-model="search.materialKeyword" />
            </div>
          </li>
          <li>
            <div class="searchLeft">加工设备: </div>
            <div class="searchRight">
              <van-field v-model="search.equipKeyword" />
            </div>
          </li>
          <li>
            <div class="searchLeft">工序: </div>
            <div class="searchRight">
              <van-field v-model="search.procedureKeyword" />
            </div>
          </li>
          <li>
            <div class="searchLeft">加工人: </div>
            <div class="searchRight">
              <van-field v-model="search.proUserName" />
            </div>
          </li>
          <li>
            <div class="searchLeft">加工时间: </div>
            <div class="searchRight">
              <van-field v-model="search.processingDate" readonly @click="timeChange(1)" />
            </div>
          </li>
          <li>
            <div class="searchLeft">检验时间: </div>
            <div class="searchRight">
              <van-field v-model="search.checkTime" readonly @click="timeChange(2)" />
            </div>
          </li>
        </ul>
        <div class="btn">
          <van-button type="primary" @click="getListInfo(1)">确定</van-button>
          <van-button type="primary" @click="resetSearchValue">重置</van-button>
        </div>
      </van-cell-group>
    </van-popup>
    <!-- 列表-->
    <van-pull-refresh v-model="isLoading" :head-height="100" @refresh="onRefresh">
      <!-- 下拉提示，通过 scale 实现一个缩放效果 -->
      <template #pulling="props">
        <img class="doge" src="https://img01.yzcdn.cn/vant/doge.png" :style="{ transform: `scale(${props.distance / 80})` }">
      </template>
      <!-- 释放提示 -->
      <template #loosing>
        <img class="doge" src="https://img01.yzcdn.cn/vant/doge.png">
      </template>
      <!-- 加载提示 -->
      <template #loading>
        <img class="doge" src="https://img01.yzcdn.cn/vant/doge-fire.jpg">
      </template>
      <van-list v-model="loading" :finished="finished" finished-text="已全部加载完成" class="van-clearfix" :immediate-check="false" @load="onLoad">
        <div class="contentBox">
          <div v-for=" item in list" :key="item.purchaseId" class="listDiv">
            <van-row style="width:100%;height:100%;">
              <div class="checkList">
                <h1><span>{{ item.materialName }}{{ item.materialCode !== '' ? '【' + item.materialCode + '】': '' }}</span><b>半成品/成品</b></h1>
                <ul>
                  <li>
                    <b>计划批次号：</b>
                    <span>{{ item.planBatchNo }}</span>
                  </li>
                  <li>
                    <b>合并计划批次号：</b>
                    <span>{{ item.planMergeBatchNo }}</span>
                  </li>
                  <li>
                    <b>工艺版本：</b>
                    <span>{{ item.routeVersion }}</span>
                  </li>
                  <li>
                    <b>材料批次：</b>
                    <span>{{ item.materialBatch }}</span>
                  </li>
                  <li>
                    <b>送检数量：</b>
                    <span>{{ item.reportNum }}</span>
                  </li>
                  <li>
                    <b>送检时间：</b>
                    <span>{{ item.reportDate }}</span>
                  </li>
                  <li>
                    <b>检验方案：</b>
                    <span>{{ item.planName }}</span>
                  </li>
                  <li>
                    <b>检验数量：</b>
                    <span>{{ item.checkNum }}</span>
                  </li>
                  <li>
                    <b>合格数：</b>
                    <span>{{ item.qualifiedNum }}</span>
                  </li>
                  <li>
                    <b>不合格数：</b>
                    <span>{{ item.unqualifiedNum }}</span>
                  </li>
                  <li>
                    <b>废品数：</b>
                    <span>{{ item.badNum }}</span>
                  </li>
                  <li>
                    <b>检验时间：</b>
                    <span>{{ item.checkTime }}</span>
                  </li>
                </ul>
                <div class="checkListBtn">
                  <van-button type="default" @click="detailsBtn(item)">详情</van-button>
                </div>
              </div>
            </van-row>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
    <div v-show="list.length === 0 && loading === false" class="noDataAvailable noDataAvailable3" />
    <!--  时间选择 -->
    <van-popup v-model="showTime" position="bottom" :style="{ height: '30%' }">
      <van-calendar v-model="showTime" type="range" :min-date="minDate" @confirm="onTimeChange" @cancel="cancel" />
    </van-popup>
  </div>
</template>
<script>
import { myFunction } from '../../../utils/function'
export default {
  name: 'PatrolInspectionRecord',
  data () {
    return {
      minDate: new Date((new Date().getFullYear() - 1), (new Date().getMonth() + 1), new Date().getDate()),
      showTime: false,
      currentDate: new Date(), // 默认时间
      title: '成品检记录查询',
      code: localStorage.getItem('code'),
      show: false,
      search: {
        workOrderNo: '',
        planBatchNo: '',
        planMergeBatchNo: '',
        planNo: '',
        materialKeyword: '',
        current: 1,
        equipKeyword: '',
        processingDate: '',
        checkTime: '',
        proUserName: '',
        size: 5,
        proProcessDateBegin: '',
        proProcessDateEnd: '',
        checkTimeBegin: '',
        checkTimeEnd: ''
      },
      list: [],
      pages: 0,
      total: 0,
      loading: false,
      finished: false,
      isLoading: false,
      num: ''
    }
  },
  mounted () {
    this.getListInfo()
  },
  methods: {
    /* 获取页面数据 */
    async getListInfo (page) {
      if (page) this.search.current = page
      if (+page === 1) this.list = []
      this.loading = true
      const res = await this.$axios.post('/dobo-product/pad/product/record/list', this.search)
      if (res.data.code === 200) {
        this.show = false
        const list = []
        res.data.data.list.filter(item => {
          list.push(item)
        })
        this.list = this.list.concat(list) // 去重 合并
        const hash = {}
        // 数组去重
        this.list = this.list.reduce((preVal, curVal) => {
          /* eslint-disable-next-line */
                      hash[curVal.id]
            ? ''
            : (hash[curVal.id] = true && preVal.push(curVal))
          return preVal
        }, [])
        this.total = res.data.data.total
        this.loading = false
        if (+this.list.length === +this.total) {
          this.finished = true
        }
      } else {
        this.$router.go(-1)
      }
    },
    timeChange (num) {
      this.num = num
      this.showTime = true
    },
    formatDate (date) {
      return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
    },
    onTimeChange (date) {
      const [start, end] = date
      if (this.num === 1) {
        this.search.processingDate = `${this.formatDate(start)} - ${this.formatDate(end)}`
        this.search.proProcessDateBegin = myFunction(start).slice(0, 10)
        this.search.proProcessDateEnd = myFunction(end).slice(0, 10)
      } else {
        this.search.checkTime = `${this.formatDate(start)} - ${this.formatDate(end)}`
        this.search.checkTimeBegin = myFunction(start).slice(0, 10)
        this.search.checkTimeEnd = myFunction(end).slice(0, 10)
      }
      this.showTime = false
    },
    cancel () {
      this.showTime = false
    },
    // 搜索条件展示
    showPopup () {
      this.show = true
    },
    // 搜索弹窗关闭时
    closeClick () {
      this.show = false
    },
    //   触底加载
    onLoad () {
      setTimeout(() => {
        if (this.list.length < this.search.current) {
          this.finished = true
          return
        }

        if (this.list.length === this.total) {
          this.finished = true
          return
        }
        let num
        num = this.search.current
        num++
        this.getListInfo(num)
      }, 1000)
    },
    //  下拉刷新
    onRefresh () {
      setTimeout(() => {
        this.list = []
        this.total = 0
        this.finished = false
        this.getListInfo(1)
        this.isLoading = false
      }, 500)
    },
    detailsBtn (row) {
      this.$router.push({ path: '/finalCheckDetails', query: row })
    },
    // 重置搜索条件
    resetSearchValue () {
      this.search = {
        workOrderNo: '',
        planBatchNo: '',
        planMergeBatchNo: '',
        planNo: '',
        materialKeyword: '',
        current: 1,
        equipKeyword: '',
        processingDate: '',
        checkTime: '',
        proUserName: '',
        size: 5,
        proProcessDateBegin: '',
        proProcessDateEnd: '',
        checkTimeBegin: '',
        checkTimeEnd: ''
      }
      this.getListInfo()
    },
    // 返回
    onClickLeft () {
      this.$router.push('/My')
    }
  }
}
</script>

<style lang='scss' scoped>
  .doge {
    width: 140px;
    height: 72px;
    margin-top: 8px;
    border-radius: 4px;
  }
.searchBox{
  li{
    padding: 0 10px;
    height: 55px;
    line-height: 45px;
    overflow: hidden;
    margin: 10px 0;
    .searchLeft{
      width: 150px;
      float: left;
      text-align: right;
      padding-right: 10px;
    }
    .searchRight{
      width: calc(100% - 150px);
      float: left;
    }
  }
}
</style>

